<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>资源管理</el-breadcrumb-item>
      <el-breadcrumb-item>资源列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入漫画名称" clearable v-model="cname" @keyup.enter.native="getComicList" @clear="getComicList">
            <el-button slot="append" icon="el-icon-search" @click="getComicList"></el-button>
          </el-input>
          <div style="margin-left:1090px;margin-top:-30px">
            <el-button type="primary" @click="showAddComicDialog" plain round>添加</el-button>
          </div>
        </el-col>
      </el-row>
      <template>
        <div>
          <el-table
              :data="comicList"
              style="width: 100%;margin-bottom: 20px;"
              border stripe
              :row-class-name="tableRowClassName">
            <el-table-column
                prop="id"
                label="id"
                width="80">
            </el-table-column>
            <el-table-column width="150px" label="资源名">
              <template slot-scope="sc">
                <el-popover
                    placement="top"
                    title="其他信息"
                    width="20"
                    trigger="hover"
                    :content="'人气:'+sc.row.popularity+'---收藏量:'+sc.row.collectionCount+'---是否推荐:'+sc.row.isfine+
                    '---购买数量'+sc.row.buyCount+'---月票数'+sc.row.ticketNum">
                  <span slot="reference">{{sc.row.name}}</span>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column width="150px" label="封面">
              <template slot-scope="sc">
                <el-avatar shape="square" style="width:84px;height: 118.8px" :fit="'fill'" :src="imgUrl+'imgs/resource/'+sc.row.id+'/'+sc.row.cover"></el-avatar>
              </template>
            </el-table-column>
            <el-table-column
                prop="writer"
                label="作者"
                width="80">
            </el-table-column>
            <el-table-column width="120px" label="漫画简介" >
              <template slot-scope="sc">
                <el-popover
                    placement="top"
                    title="漫画简介"
                    width="300"
                    trigger="hover"
                    :content="sc.row.introduceText">
                  <el-button focus slot="reference" maxlength="30" >查看简介</el-button>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="性取向" width="80px">
              <template slot-scope="sc" :v-if="sc.row.isboy==1" >
                <span v-if="sc.row.isboy== 1" style="color:blue">男性向</span>
                <span v-else style="color: red">女性向</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="tag"
                label="标签名"
                width="80">
            </el-table-column>
            <el-table-column label="是否锁定" width="200px" prop="status">
              <template slot-scope="sc">
                <el-switch
                    style="display: block"
                    v-model='sc.row.status==1?true:false'
                    active-color="#ff4949"
                    inactive-color="#13ce66"
                    active-text="锁定"
                    inactive-text="未锁定"
                    @change='lockComic(sc.row.id,sc.row.status)'
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" plain @click="seeThisSection(scope.row.id)"style="margin-right:20px">编辑章节</el-button>
                <el-button size="mini" type="warning" @click="showEditComicDialog(scope.row)" >修改</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button type="danger" size="mini" @click="removeComicById(scope.row.id)" style="margin-top:3px;margin-left:2px ">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
<!--          {{imgPath}}-->
<!--          {{comicList}}-->
  </div>
</template>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[3, 6 , 9, 12]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>
    <!-- 添加资源表单！！！！   :close-on-press-escape是按ESC键不会退出编辑页面-->
    <div>
      <el-dialog title="添加资源" :visible.sync="addComicFormVisible" :close-on-click-modal="false" @close="clearRegisterCache" >

        <el-form :model="addComicForm" ref="addComicForm" label-width="100px" class="demo-ruleForm" >
          <el-form-item label="漫画名称" prop="name">
            <el-input v-model="addComicForm.name" maxlength="20" show-word-limit size="small"></el-input>
          </el-form-item>
          <el-form-item label="漫画简介" prop="introduceText">
            <el-input type="textarea" v-model="addComicForm.introduceText" maxlength="50" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="作者" prop="writer">
            <el-input v-model="addComicForm.writer" maxlength="10" show-word-limit></el-input>
          </el-form-item>
<!--          <el-form-item label="上传封面">
            <el-upload
                class="avatar-uploader"
                :headers="myheaders"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                name="headerImg">
              <img style="height: 80px;width:80px;border-radius:50%" v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>-->
          <el-form-item label="性取向">
            <el-radio-group v-model="addComicForm.isboy">
              <el-radio :label="1">少男</el-radio>
              <el-radio :label="0">少女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="标签选择" prop="tagId">
            <el-select v-model="addComicForm.tagId" placeholder="请选择标签">
              <el-option label="请选择" value=""></el-option>
              <el-option v-for="t in tagList" :label="t.name" :value="t.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitComicForm('addComicForm')">确认添加</el-button>
            <el-button type="info" @click="resetAddComicForm">重新输入</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <!--修改资源表单!!!!-->
    <div>
      <el-dialog title="编辑资源" :visible.sync="editComicFormVisible" size="mini" :close-on-click-modal="false" @close="clearUpdateCache">
        <el-form :model="editComicForm" ref="editComicForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="漫画名称" prop="name">
            <el-input v-model="editComicForm.name" max-length="10" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="漫画简介" autosize prop="introduceText">
            <el-input type="textarea" v-model="editComicForm.introduceText"></el-input>
          </el-form-item>
          <el-form-item label="作者" prop="writer">
            <el-input v-model="editComicForm.writer"></el-input>
          </el-form-item>
          <el-form-item label="上传封面">
            <img shape="square" style="width:84px;height: 118.8px" v-show="isEditImg" :src="imgUrl +'imgs/resource/'+editComicForm.id+'/'+editComicForm.cover " :title="editComicForm.cover">
            <el-upload
                class="avatar-uploader"
                :data="upId"
                :headers="myheaders"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="editHandleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                name="headerImg">
              <img shape="square" style="height:80px;width: 40px" v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="标签" prop="tagId">
            <el-select v-model="editComicForm.tagId" placeholder="请选择课程">
              <el-option label="请选择" value=""></el-option>
              <el-option v-for="s in tagList" :label="s.name" :value="s.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="性别倾向" prop="isboy">
            <el-radio-group v-model="editComicForm.isboy">
              <el-radio :label="1">少男</el-radio>
              <el-radio :label="0">少女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitEditComicForm('editComicForm')">编辑</el-button>
            <el-button type="info" @click="resetComicEditForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
<!--      {{upId}}-->
    </div>

    <!-- 章节列表-->
    <div>
      <el-dialog title="章节列表" :visible.sync="showSection" size="mini" @close="getComicList">
        <el-button type="primary" size="mini" @click="addSectionFormVisible=true" style="margin-left:650px" plain>添加</el-button>
        <el-table :data="thisSectionList">
         <el-table-column
          label="章节id"
          prop="id">
         </el-table-column>
         <el-table-column
             label="章节名字"
          prop="name">
         </el-table-column>
         <el-table-column
             label="资源id"
          prop="resourceId">
         </el-table-column>
         <el-table-column label="是否免费">
           <template slot-scope="sc" :v-if="sc.row.isfree==1" >
             <span v-if="sc.row.isfree== 1" style="color:orange">收费</span>
             <span v-else style="color: grey">免费</span>
           </template>
         </el-table-column>
         <el-table-column
             label="章节页数"
          prop="pageCount"
            >
           <template slot-scope="scope">
             <el-badge is-dot class="item"><el-button plain size="mini" type="primary" @click="showPageDialog(scope.row.id,scope.row.resourceId)">编辑页({{scope.row.pageCount}})</el-button></el-badge>
           </template>>
         </el-table-column>
         <el-table-column
             label="更新时间"
          prop="updateTime">
         </el-table-column>
         <el-table-column label="操作">
           <template slot-scope="scope">
             <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
             <el-button type="danger" size="mini" @click="removeSectionById(scope.row.id,scope.row.resourceId)" style="margin-top:3px;margin-left:2px ">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
        <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :current-page="pageNum1"
            :page-sizes="[3, 6 , 9, 12]"
            :page-size="pageSize1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total1"
        ></el-pagination>
      </el-dialog>
    </div>
    <!--添加章节-->
    <div>
      <el-dialog title="添加章节" :visible.sync="addSectionFormVisible">
        <el-form :model="addSectionForm"  ref="addSectionForm">
          <el-form-item label="章节名称" label-width="120px" prop="name">
            <el-input v-model="addSectionForm.name"></el-input>
          </el-form-item>
          <el-form-item label="章节页数" label-width="120px" prop="pageCount">
            <el-input v-model="addSectionForm.pageCount"></el-input>
          </el-form-item>
          <el-form-item label="是否收费" label-width="120px" prop="isfree">
            <el-select v-model="addSectionForm.isfree" placeholder="请选择是否收费">
              <el-option label="免费" :value="0" checkd></el-option>
              <el-option label="收费" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addSectionFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addSection">保存</el-button>

        </div>
      </el-dialog>
    </div>
    <!-- 修改章节-->
    <div>
      <el-dialog title="修改章节" :visible.sync="editSectionFormVisible" size="mini">
        <el-form :model="editSectionForm"  ref="editSectionForm">
          <el-form-item label="章节id" label-width="120px" prop="id">
            <el-input v-model="editSectionForm.id"></el-input>
          </el-form-item>
          <el-form-item label="章节名称" label-width="120px" prop="name">
            <el-input v-model="editSectionForm.name"></el-input>
          </el-form-item>
          <el-form-item  label-width="120px" prop="isfree">
            <el-select v-model="editSectionForm.isfree" placeholder="请选择是否收费" >
              <el-option label="收费" :value="1"></el-option>
              <el-option label='免费' :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="总页数" label-width="120px" prop="pageCount">
            <el-input v-model="editSectionForm.pageCount"></el-input>
          </el-form-item>
          <el-form-item label="更新时间" label-width="120px" prop="updateTime">
            <el-input v-model="editSectionForm.updateTime"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetSectionForm">重置</el-button>
          <el-button type="primary" @click="changeSectionForm('editSectionForm')">确认修改</el-button>
        </div>
<!--        {{editSectionForm}}-->
      </el-dialog>
    </div>
    <!-- 具体页列表-->
    <div>
      <el-dialog title="页列表" :visible.sync="showPage" size="mini">
        <el-button type="primary" size="mini" @click="addPageFormVisible=true" style="margin-left:650px">添加</el-button>
        <el-table :data="pageList">
          <el-table-column
              label="章节id"
              prop="sectionId">
          </el-table-column>
          <el-table-column
              label="页id"
              prop="id">
          </el-table-column>
          <!--图片-->
          <el-table-column width="150px" label="图片">
            <template slot-scope="sc" >
              <el-avatar  shape="square" style="width:42px;height: 59px"  :src="imgUrl1+'imgs/resource/'+firstId+'/'+sc.row.sectionId+'/'+sc.row.imgUrl"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="warning" size="mini" @click="showEditPageDialog(scope.row)" >修改</el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button type="danger" size="mini" @click="removePageById(scope.row.id)" style="margin-top:3px;margin-left:2px ">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            :current-page="pageNum2"
            :page-sizes="[2, 4 , 6, 12]"
            :page-size="pageSize2"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total2"
        ></el-pagination>
<!--          {{imgUrl1}}-&#45;&#45;{{firstId}}-&#45;&#45;{{secondId}}==={{pageList}}-->
      </el-dialog>
    </div>

    <!-- 添加 页 不跳出模态框-->
    <div>
      <el-dialog title="添加 页" :visible.sync="addPageFormVisible">
        <el-form :model="addPageForm"  ref="addSectionForm">
          <el-form-item label-width="120px" prop="id">
        </el-form-item>
        <el-form-item label="图片地址" prop="imgUrl">
          <el-input v-model="addPageForm.imgUrl"></el-input>
        </el-form-item>
          <!--          <el-form-item label="上传封面">
            <el-upload
                class="avatar-uploader"
                :headers="myheaders"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                name="headerImg">
              <img style="height: 80px;width:80px;border-radius:50%" v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addPageFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addPage()">保存</el-button>

        </div>
      </el-dialog>
    </div>
    <!--修改 页 表单!!!!-->
    <div>
      <el-dialog title="编辑资源" :visible.sync="editPageFormVisible" size="mini" :close-on-click-modal="false" @close="clearUpdatePageCache">
        <el-form :model="editPageForm" ref="editPageForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="章节id" prop="secondId">
            <el-input v-model="secondId" readonly></el-input>
          </el-form-item>
          <el-form-item label="上传图片">
            <img shape="square" style="width:84px;height: 118.8px" v-show="isEditImg1" :src="imgUrl1 +'imgs/resource/'+firstId+'/'+secondId+'/'+editPageForm.imgUrl" :title="editPageForm.imgUrl">
            <el-upload
                class="avatar-uploader"
                :data="sid"
                :headers="myheaders1"
                :action="uploadUrl1"
                :show-file-list="false"
                :on-success="editHandleAvatarSuccess1"
                :before-upload="beforeAvatarUpload"
                name="headerImg">
              <img shape="square" style="height:80px;width: 40px" v-if="imageUrl1" :src="imageUrl1" class="avatar">
              <i  class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitEditPageForm('editPageForm')">编辑</el-button>
            <el-button type="info" @click="resetPageEditForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

    </div>
  </div>
</template>

<script>
export default {
    data() {
      return {
        upId:'',
        myheaders:{
          token:sessionStorage.getItem("token")
        },
        myheaders1:{
          token:sessionStorage.getItem("token")
        },
        imgUrl:'',
        imgUrl1:'',
        isEditImg:true,
        isEditImg1:true,
        //以上是头像的绑定imgPath
        editComicFormVisible:false,
        addComicFormVisible:false,
        // 以上是漫画crud(增加(Create)、读取查询(Retrieve)、更新(Update)和删除(Delete))的绑定
        editSectionFormVisible:false,
        addSectionFormVisible:false,
        showSection:false,
        cname: '',
        tagList:[],
        comicList: [],
        thisSectionList:[],
        pageNum: 1,
        pageSize: 3,
        prePage: 0,
        nextPage: 0,
        pages: 0,
        total: 0,
        total1:0,
        pageSize1:2,
        pageNum1:1,
        total2:0,
        pageSize2:2,
        pageNum2:1,
        // 以上是分页的
        //章节的添加
        addSectionForm:{
          name:'',
          resourceId:'',
          isfree:0,
          pageCount:''
        },
        // 章节的修改
        editSectionForm:{
          id:'',
          name:'',
          resourceId:'',
          isfree:0,
          pageCount:'',
          updateTime:''
        },
        // 资源的添加
        addComicForm:{
            name:'',
            cover:'',
            writer:'',
            isboy:1,
            tagId:'',
            introduceText:''
        },
        editComicForm:{
            id:0,
            name:'',
            cover:'',
            writer:'',
            isboy:'',
            tagId:'',
            status:'',
            introduceText:''
        },
        imageUrl: '',
        imageUrl1:'',
        uploadUrl:'',
        uploadUrl1:'',
        // 上面是章节和漫画的
        // 下面是页的编辑

        //添加 页
        addPageFormVisible:false,
        editPageFormVisible:false,
        addPageForm:{
          id:'',
          sectionId:'',
          imgUrl: '' ,
        },
        editPageForm:{
          id:'',
          sectionId:'',
          imgUrl: ''
        },
        //显示 页
        showPage:false,
        firstId:'',
        secondId:'',
        pageList:[],
        // 修改页需要的id
        sid:''


      };
    },
      methods: {
      // 修改页
        submitEditPageForm(){
          console.log(this.sid+"==");
          let url =  this.$baseUrl.baseUrl + "page/modify"
          this.$axios.put(url,{
            id:this.editPageForm.id,
            sectionId:this.secondId,
            imgUrl:this.editPageForm.imgUrl
          }).then(res =>{
            if(res.data.code == 200){
              this.editPageFormVisible = false;
              this.$message({
                message:res.data.msg,
                type:'success',
                duration:1000
              })
              this.getPageList(this.secondId);
            }else{
              this.$message({
                message:res.data.msg,
                type:'error',
                duration:1000
              })
            }
          })
        },
        // 添加一页(先不添加图片)
        addPage(){
          // 打印一下parentId
          console.log(this.secondId);
          this.addPageFormVisible=true;
          let url =  this.$baseUrl.baseUrl + "page/add"
            this.$axios.post(url,{
              sectionId:this.secondId,
              imgUrl : this.addPageForm.imgUrl,
            }).then(res =>{
              if(res.data.code == 200){
                this.addPageFormVisible = false;
                this.$message({
                  message:res.data.msg,
                  type:'success',
                  duration:1000
                })
                this.getPageList(this.secondId);
              }else{
                this.$message({
                  message:res.data.msg,
                  type:'error',
                  duration:1000
                })
              }
            })
        },
        // 删除,so easy
        removePageById(id){
          console.log(id + "需要删除的id。。。");
          this.$confirm("此操作将永久删除该权限,是否继续?","提示",{
            confirmButtonText:'确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() =>{
            // 仔细检查，少了一个.baseUrl，那肯定报错404啊
            let url = this.$baseUrl.baseUrl + "page/del/"+id;
            this.$axios.delete(url)
                .then((res)=>{
                  if(res.data.code == 200){
                    this.$message({
                      message:res.data.msg,
                      type:'success',
                      duration:1000
                    })
                    this.getPageList();
                  }else {
                    this.$message({
                      message:res.data.msg,
                      type:'error',
                      duration:1000
                    })
                  }
                })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        // 打开页的模态框
        showPageDialog(id,resourceId){
          this.showPage = true;
          // 资源id,用于展示画面等
          this.secondId=id;
          this.firstId=resourceId;
          this.getPageList(id);
        },
        showEditPageDialog(obj){
          this.editPageFormVisible=true;
          this.editPageForm = obj;
          this.sid={sid:this.secondId}

        },
        //分页处理函数
        handleSizeChange2(size){
          this.pageSize2 = size;
          this.pageNum2 = 1;

          this.initPageList();
        },
        handleCurrentChange2(now){
          this.pageNum2 = now;
          this.initPageList()
        },
        // 初始化 页列表
        initPageList(){
          let url = this.$baseUrl.baseUrl + "page/list" ;
          this.$axios.get(url,{
            params:{
              id:this.secondId,
              now:this.pageNum2,
              size:this.pageSize2
            }
          }).then(res =>{
            if(res.data.code == 200){
              this.pageList = res.data.data.list;
              this.pageNum2 = res.data.data.pageNum;
              this.pageSize2 = res.data.data.pageSize;
              this.total2 = res.data.data.total;

              this.prePage = res.data.data.prePage;
              this.nextPage = res.data.data.nextPage;
              this.pages = res.data.data.pages;
            }else{
              alert(res.data.msg);
            }
          })
        },
        getPageList(){
          this.pageNum2 = 1;
          this.initPageList();
        },

        // 以上是编辑页的,===不要再看下面的了！！！
        tableRowClassName({row, rowIndex}) {
          if (rowIndex %2===0) {
            return 'warning-row';
          } else{
            return 'success-row';
          }
        },
        clearUpdateCache(){
          // 可以随便弹一个东西测试一个
          this.resetComicEditForm()
          this.reloadData()
        },
        clearUpdatePageCache(){
          this.resetPageEditForm()
          this.getPageList()
        },
        // 头像上传的两个函数
        // 上传成功之后的回调
        handleAvatarSuccess(res, file) {
          console.log(res,file)
          this.imageUrl = URL.createObjectURL(file.raw);
          this.addComicForm.cover = res.data
        },
        // 上传之前拦截
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },
        // 以上
        editHandleAvatarSuccess(res,file){
          this.imageUrl=URL.createObjectURL(file.raw);
          this.editComicForm.cover = res.data;
          this.isEditImg = false;
        },
        editHandleAvatarSuccess1(res,file){
          this.imageUrl1=URL.createObjectURL(file.raw);
          this.editPageForm.imgUrl = res.data;
          this.isEditImg1 = false;
        },
        lockComic(id,status){
          console.log(id+"==="+status);
          status=(status-1)*(status-1);
          let url =  this.$baseUrl.baseUrl + "resource/lock"
          this.$axios.get(url,{
            params:{
              id:id,
              status:status
            }
          }).then(res =>{
            if(res.data.code == 200){
              this.$message({
                message:res.data.msg,
                type:'success',
                duration:1000
              })
              this.reloadData();
            }else{
              this.$message({
                message:res.data.msg,
                type:'error',
                duration:1000
              })
            }
          })
        },
        //删除资源
        removeComicById(id){
          console.log(id + "需要删除的id。。。");
          this.$confirm("此操作将永久删除该权限,是否继续?","提示",{
            confirmButtonText:'确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() =>{
            // 仔细检查，少了一个.baseUrl，那肯定报错404啊
            let url = this.$baseUrl.baseUrl + "resource/del/"+id;
            this.$axios.delete(url)
                .then((res)=>{
                  if(res.data.code == 200){
                    this.$message({
                      message:res.data.msg,
                      type:'success',
                      duration:1000
                    })
                    this.reloadData();
                  }else {
                    this.$message({
                      message:res.data.msg,
                      type:'error',
                      duration:1000
                    })
                  }
                })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        submitEditComicForm(){
          let url =  this.$baseUrl.baseUrl + "resource/modify"
          this.$axios.put(url,{
            id:this.editComicForm.id,
            name:this.editComicForm.name,
            cover:this.editComicForm.cover,
            writer:this.editComicForm.writer,
            isboy:this.editComicForm.isboy,
            tagId:this.editComicForm.tagId,
            introduceText:this.editComicForm.introduceText
          }).then(res =>{
            if(res.data.code == 200){
              this.editComicFormVisible = false;
              this.$message({
                message:res.data.msg,
                type:'success',
                duration:1000
              })
              this.getComicList();
            }else{
              this.$message({
                message:res.data.msg,
                type:'error',
                duration:1000
              })
            }
          })
        },

        resetComicEditForm(){
          this.$refs.editComicForm.resetFields()
          this.uploadUrl='this.$baseUrl.baseUrl + "resource/upload"'
        },
        resetPageEditForm(){
          this.$refs.editPageForm.resetFields()
          this.uploadUrl = 'this.$baseUrl.baseUrl + "page/upload"'
        },
        showEditComicDialog(obj){
          this.upId={upId:obj.id};
          this.editComicFormVisible = true;
          this.editComicForm=obj;
        },
        showAddComicDialog(){
            this.addComicFormVisible=true
        },
        submitComicForm(){
          // 打印一下parentId
          let url =  this.$baseUrl.baseUrl + "resource/add"
          this.$axios.post(url,{
            name:this.addComicForm.name,
            cover:this.addComicForm.cover,
            writer:this.addComicForm.writer,
            isboy:this.addComicForm.isboy,
            tagId:this.addComicForm.tagId,
            introduceText:this.addComicForm.introduceText,
          }).then(res =>{
            if(res.data.code == 200){
              this.addComicFormVisible = false;
              this.$message({
                message:res.data.msg,
                type:'success',
                duration:1000
              })
              this.resetAddComicForm();
              this.reloadData();
              this.imageUrl= "imgUrl +'imgs/resource/'+editComicForm.id+'/'+this.editComicForm.cover"
            }else{
              this.$message({
                message:res.data.msg,
                type:'error',
                duration:1000
              })
            }
          })
        },
        clearRegisterCache(){
          this.resetAddComicForm()
        },
        resetAddComicForm(){
          this.$refs.addComicForm.resetFields();
          this.imageUrl='';
          this.uploadUrl=this.$baseUrl.baseUrl + "resource/upload"
        },
        // 删除章节
        removeSectionById(id,resourceId){
          console.log(id + "需要删除的id。。。");
          this.$confirm("此操作将永久删除该章节,是否继续?","提示",{
            confirmButtonText:'确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() =>{
            // 仔细检查，少了一个.baseUrl，那肯定报错404啊
            let url = this.$baseUrl.baseUrl + "section/del/"+id;
            this.$axios.delete(url)
                .then((res)=>{
                  if(res.data.code == 200){
                    this.$message({
                      message:res.data.msg,
                      type:'success',
                      duration:1000
                    })
                    this.seeThisSection(resourceId);
                  }else {
                    this.$message({
                      message:res.data.msg,
                      type:'error',
                      duration:1000
                    })
                  }
                })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        // 修改章节
        changeSectionForm(){
          let url =  this.$baseUrl.baseUrl + "section/modify"
          this.$axios.put(url,{
            id:this.editSectionForm.id,
            name:this.editSectionForm.name,
            isfree:this.editSectionForm.isfree,
            pageCount:this.editSectionForm.pageCount,
            resourceId:this.editSectionForm.resourceId
          }).then(res =>{
            if(res.data.code == 200){
              this.editSectionFormVisible = false;
              this.$message({
                message:res.data.msg,
                type:'success',
                duration:1000
              })
              this.seeThisSection(this.editSectionForm.resourceId);
              this.editSectionFormVisible=false;
            }else{
              this.$message({
                message:res.data.msg,
                type:'error',
                duration:1000
              })
            }
          })
        },

        resetSectionForm(){
            this.$refs.editSectionForm.resetFields();
        },
        //打开章节编辑框
        showEditDialog(obj){
          this.editSectionFormVisible = true;
          this.editSectionForm = obj;
        },
        //添加章节数据
        addSection(){
          let url=this.$baseUrl.baseUrl+"section/add";
          this.$axios.post(url,{
            name:this.addSectionForm.name,
            isfree:this.addSectionForm.isfree,
            pageCount:this.addSectionForm.pageCount,
            resourceId:this.addSectionForm.resourceId
          }).then((res)=>{
            if(res.data.code==200){
              this.$message({
                message:res.data.msg,
                type:'success',
                duration:1000
              })
              this.seeThisSection(this.addSectionForm.resourceId);
              this.addSectionFormVisible=false;
              this.addSectionForm={resourceId:this.addSectionForm.resourceId};
            }else{
              this.$message({
                message:res.data.msg,
                type:'error',
                duration:1000
              })
            }
          })
        },
        seeThisSection(id){
          this.showSection = true;
          this.addSectionForm.resourceId=id;
          let url = this.$baseUrl.baseUrl + "section/list" ;
          this.$axios.get(url,{
            params:{
              id:id,
              now:this.pageNum1,
              size:this.pageSize1
            }
          }).then(res =>{
            if(res.data.code == 200){
              this.thisSectionList = res.data.data.list;
              this.pageNum1 = res.data.data.pageNum;
              this.pageSize1 = res.data.data.pageSize;
              this.total1 = res.data.data.total;

              this.prePage = res.data.data.prePage;
              this.nextPage = res.data.data.nextPage;
              this.pages = res.data.data.pages;
            }else{
              alert(res.data.msg);
            }
          })
        },
        go(num){
          this.pageNum = num;
          this.reloadData();
        },
        // 删除1---删除资源(非章节)
        removeRemarkById(id){
          console.log(id + "需要删除的评论id。。。");
          this.$confirm("此操作将永久删除该评论,是否继续?","提示",{
            confirmButtonText:'确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() =>{
            // 仔细检查，少了一个.baseUrl，那肯定报错404啊
            let url = this.$baseUrl.baseUrl + "resource/del/"+id;
            this.$axios.delete(url)
                .then((res)=>{
                  if(res.data.code == 200){
                    this.$message({
                      message:res.data.msg,
                      type:'success',
                      duration:1000
                    })
                    this.reloadData();
                  }else {
                    this.$message({
                      message:res.data.msg,
                      type:'error',
                      duration:1000
                    })
                  }
                })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },

        reloadData(){
          let url = this.$baseUrl.baseUrl + "resource/list" ;
          this.$axios.get(url,{
            params:{
              name:this.cname,
              now:this.pageNum,
              size:this.pageSize
            }
          }).then(res =>{
            if(res.data.code == 200){
              this.comicList = res.data.data.list;
              this.pageNum = res.data.data.pageNum;
              this.pageSize = res.data.data.pageSize;
              this.total = res.data.data.total;

              this.prePage = res.data.data.prePage;
              this.nextPage = res.data.data.nextPage;
              this.pages = res.data.data.pages;
            }else{
              alert(res.data.msg);
            }
          })
        },
        handleSizeChange(size){
          this.pageSize = size;
          this.pageNum = 1;

          this.reloadData();
        },
        handleSizeChange1(size){
          this.pageSize1 = size;
          this.pageNum1 = 1;

          this.seeThisSection(this.addSectionForm.resourceId);
        },
        handleCurrentChange(now){
          this.pageNum = now;
          this.reloadData()
        },
        handleCurrentChange1(now){
          this.pageNum1 = now;
          this.seeThisSection(this.addSectionForm.resourceId)
        },
        getComicList(){
          this.pageNum = 1;
          this.reloadData();
        },
        initTagList() {
          let url = this.$baseUrl.baseUrl + "tag/initAllTag";
          this.$axios.get(url).then((res) => {
            if (res.data.code == 200) {
              this.tagList = res.data.data;
            }
          })
        },
      },
      created() {
        this.reloadData();
        this.initTagList();
        this.uploadUrl = this.$baseUrl.baseUrl + "resource/upload";
        this.uploadUrl1 = this.$baseUrl.baseUrl + "page/upload";
        this.imgUrl = this.$baseUrl.imgUrl
        this.imgUrl1 = this.$baseUrl.imgUrl
        this.initPageList();

      }

};
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
/deep/.el-table th > .cell {
  text-align: center;
}

/deep/.el-table .cell {
  text-align: center;
}


.el-input__inner {
  height: 33px;
  font-size: 13px;
  box-shadow: none;
  border: 1px solid #e9e9e9;
}

.el-input__inner:hover {
  border-color: #e9e9e9;
}

.el-input__inner:focus {
  border-color: #42a5f5;
  box-shadow: none;
  transition-duration: .5s;
}

.el-input__inner::-webkit-input-placeholder {
  line-height: 20px;
}

.el-input__inner, .el-checkbox__inner, .el-textarea__inner, .el-button {
  border-radius: 0;
}

</style>